<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> 
        html{height:100%} 
        body{height:100%;margin:0px;padding:0px} 
        #container{height:100%} 
        #app{
            height: 100%;
        }
    </style> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=eIxOKEnFpKxciD8FDVzLGGweNSnCX8hp"></script>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&&type=webgl&ak=eIxOKEnFpKxciD8FDVzLGGweNSnCX8hp"></script> -->
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in list" :key="item.uid">
                {{ item.title }} {{ item.point  | fil1 }}
            </li>
        </ul>
        <div id="container"></div>
    </div>
    
    <script type="text/javascript">
        var that = ""
        var vm = new Vue({
            el:"#app",
            data () {
                return {
                    list:[],
                    map:""
                }
            },
            filters: {
                fil1(result){
                    var pointA = new BMap.Point(113.64964385,34.75661006);  // 创建点坐标A--大渡口区
                    var pointB = new BMap.Point(result.lng,result.lat);  // 创建点坐标B--江北区
                    var val = that.map.getDistance(pointA,pointB); 
                    return    `距离为${val/1000}公里`
                }
            },
            created () {
                that = this;
            },
            methods: {
                init(){
                    var _this = this;
                    var map = new BMap.Map("container");
                    this.map = map;
                    var point = new BMap.Point(113.64964385,34.75661006);
                    map.centerAndZoom(point,12);
                    map.enableScrollWheelZoom(true);
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);

                    var options = {
                        onSearchComplete: function(results){
                            // 判断状态是否正确
                            if (local.getStatus() == BMAP_STATUS_SUCCESS){
                                console.log(results)
                                _this.list = results.Ir;
                                // var s = [];
                                // for (var i = 0; i < results.getCurrentNumPois(); i ++){
                                //     s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                                // }
                                // document.getElementById("r-result").innerHTML = s.join("<br/>");
                            }
                        }
                    };
                    var local = new BMap.LocalSearch(map, options);
                    local.search("影院");
                }
            },
            mounted () {
                this.init()
            }
        })
        // var map = new BMapGL.Map("container");
        
        // var local = new BMap.LocalSearch(map, {
        //     renderOptions:{map: map}
        // });
        // local.search("影院");
        </script> 
</body>
</html>